<template>
	<div id="startup">
		<el-form :inline="true" class="demo-form-inline">
			<el-row>
				<el-col>
					<el-form-item label="查询名称：">
						<el-input v-model="processName" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="流程Key：">
						<el-input v-model="processKey" placeholder="请输入内容"></el-input>
					</el-form-item>

					<el-form-item label="状态：">
						<el-select v-model="stateValue" placeholder="请选择">
							<el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="优先级：">
						<el-select v-model="priorityValue" placeholder="请选择">
							<el-option v-for="item in priority" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="开始时间：" required>
						<el-col :span="11">
							<el-form-item prop="date1">
								<el-date-picker v-model="satrtTime" type="date" placeholder="请选择日期" > </el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2"><b class="data-line-red">*</b>至</el-col>
						<el-col :span="11">
							<el-form-item prop="date2">
								<el-date-picker v-model="endTime" type="date" placeholder="请选择日期"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
			</el-row>
		</el-form>

		<div>
			<template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="name" label="流程名称"></el-table-column>
					<el-table-column prop="processDefinitionName" label="定义名称"></el-table-column>
					<el-table-column prop="processDefinitionVersion" label="版本"></el-table-column>
					<el-table-column prop="active" label="状态"></el-table-column>
					<el-table-column prop="startTime" label="开始时间"></el-table-column>
					<el-table-column label="操作" width="150">
						<template scope="scope">
							<el-button type="text" size="small" @click="see(scope.row)">查看</el-button>
							<el-button @click="activation(scope.row)" type="text" size="small">激活</el-button>
							<el-button @click="hangUp(scope.row)" type="text" size="small">挂起</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage.page" :page-sizes="pageSize" :page-size="currentPage.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<div class="dialog">
			<el-dialog title="流程定义信息" :visible.sync="dialogVisible" :before-close="handleClose">
				<div class="el-message-box__content">
					<iframe :src="addr" width="100%" height="300px" id="img-dialog"></iframe>
				</div>
				<span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
              <!--<el-button type="primary" @click="submit()">确 定</el-button>-->
          </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'startup',
		data() {
			return {
				priorityValue: '',
				priority: [{
					label: '一般',
					value: 'normal',
				}, {
					label: '中等',
					value: 'middle',
				}, {
					label: '优先',
					value: 'high',
				}],
				state: [{
					label: '正常',
					value: '0',
				}, {
					label: '挂起',
					value: '1',
				}],
				stateValue: '',
				processName: '',
				processKey: '',
				satrtTime: '',
				endTime: '',
				tableData: [],
				currentPage: {
					page: 1,
					pageNum: 10,
				},
				pageSize: ['10', '15', '50'],
				total: 400,
				dialogVisible: false, //控制dialog
				inputProcessName: '', //输入流程名称
				inputStateValue: 'normal',
				inputState: [],
				processId: '',
				definitionInfoName: '', //流程名称
				definitionInfoVersion: '', //版本
				definitionInfoDescribe: '', //描述
				addr: '',
			}
		},
		mounted: function() {
			var that = this;
			var data = {
				startBefore: that.endTime,
				startAfter: that.satrtTime,
				searchName: that.processName,
				pageSize: that.currentPage.pageNum,
				currentPage: that.currentPage.page,
				processDefinitionKey: that.processKey,
				status: that.stateValue,
				processPriority: that.priorityValue,
			};
			this.$http.post('http://localhost/act/processInstance/getProcessInstances',
				data
			).then(function(data) {
				var tableData = data.data.data
				Date.prototype.Format = function(fmt) { //author: meizz 
					var o = {
						"M+": this.getMonth() + 1, //月份 
						"d+": this.getDate(), //日 
						"h+": this.getHours(), //小时 
						"m+": this.getMinutes(), //分 
						"s+": this.getSeconds(), //秒 
					};
					if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
					for(var k in o)
						if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					return fmt;
				} //转换后端的日期格式
				for(var i = 0; i < tableData.length; i++) {
					tableData[i].startTime = new Date(tableData[i].startTime).Format("yyyy-MM-dd hh:mm:ss")
				}
				that.tableData = tableData
				that.total = data.data.total

			}, function(error) {
				console.log(error)
				that.$message({
					message: data.data.message,
					type: 'warning'
				});
			});
			

		},
	
		methods: {
			search() {
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var that = this;
				console.log(that.currentPage)
				var data = {

					startBefore: that.endTime,
					startAfter: that.satrtTime,
					searchName: that.processName,
					pageSize: that.currentPage.pageNum,
					currentPage: that.currentPage.page,
					processDefinitionKey: that.processKey,
					status: that.stateValue,
					processPriority: that.priorityValue,
				};
				this.$http.post('http://localhost/act/processInstance/getProcessInstances',
					data
				).then(function(data) {
					loading.close()
					var tableData = data.data.data
					Date.prototype.Format = function(fmt) { //author: meizz 
						var o = {
							"M+": this.getMonth() + 1, //月份 
							"d+": this.getDate(), //日 
							"h+": this.getHours(), //小时 
							"m+": this.getMinutes(), //分 
							"s+": this.getSeconds(), //秒 
						};
						if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
						for(var k in o)
							if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
						return fmt;
					} //转换后端的日期格式
					for(var i = 0; i < tableData.length; i++) {
						tableData[i].startTime = new Date(tableData[i].startTime).Format("yyyy-MM-dd hh:mm:ss")
					}
					that.tableData = tableData
					that.total = data.data.total

				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})

			},
			activation(item) {
				console.log(item)
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var vm = this;
				this.$http.post('http://localhost//act/processInstance/activateProcessInstance?processInstanceId=' + item.processInstanceId, ).then(function(data) {
					console.log(data)
					loading.close();
					vm.$message({
						message: "激活成功",
						type: 'success'
					});
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})
			},
			hangUp(item) {
				var vm = this
				var loading = this.$loading({
					lock: true,
					text: '加载中,请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post('http://localhost//act/processInstance/suspendProcessInstance?processInstanceId=' + item.processInstanceId, ).then(function(data) {
					console.log(data)
					loading.close();
					vm.$message({
						message: "挂起成功",
						type: 'success'
					});
				}).catch(function(error) {
					loading.close();
					console.log(error.response.status)
					if(error.response.status == 504){
						that.$message.error("网络超时，请重试")
					}
					
				})
			},
			handleSizeChange(val) { //
				var vm = this
				vm.currentPage.pageNum = val;
				vm.search()
			},
			handleCurrentChange(val) {
				var vm = this
				console.log(`当前页: ${val}`);
				vm.currentPage.page = val
				vm.search()

			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			see(item) {
				var vm = this
				vm.addr = "http://localhost//act/processInstance/showDiagram?processInstanceId=" + item.processInstanceId;
				vm.dialogVisible = true;
				$("#img-dialog").contents().find('img').css('width','90%');
				console.log($("#img-dialog").contents().find('body img'))
			}
		},
	}
</script>
<style>
	.dialog .el-dialog {
		width: 100%;
	}
</style>